<template>
    <div class="app">
        <!--
            vue 模块化项目中 图片地址会以两种方式进行处理
                1、以模块进行图片处理
                    在单文件组件中，直接以字符串方式定义给img 标签获取 css 样式的图片路径
                    在程序运行和编译过程中，会被作为项目中模块进行 路径和名称的 转换
                    + 上述情况定义图片路径时就以当前文件作为参数定义路径即可
                2、以文本进行地址处理
                    在定义图片路径时，路径地址以变量形式存在，通过vue语法绑定
                    或者在标签上定义的行内表示使用的图片定义定义
                    上述的两种情况都会被vue 进行 模块化 路径编译转换
                    + 上述情况图片地址定义 以 index.html 作为参数定义
            基于上述的两种情况
                静态图片资源会被分割到两个区域定义
                a、public : 不参与项目编译的图片存放于该目录
                b、src/assets ：参与项目编译图片存放于该目录
        -->
        <!-- <img src="../public/img/star-close.png"> -->
        <img src="./assets/star-close.png">
        <div class="img"></div>

        <!-- 
            vue的模块开发启动开发服务器，如果项目出现了地址404情况
            开发服务器返回的不是 404 notFound，直接把程序的 index.html 作为结果返回

            不参与 vue 图片编译的标签，是不能直接使用 src/assets 中的资源的
        -->
        <img :src="imgUrl">
        <div style="width:100px;height:100px;background-image: url('./img/user01.png');"></div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            imgUrl:"./img/user01.png"
            // imgUrl:"./assets/user01.png"
        }
    }
};
</script>
<style>
    .img{
        width: 100px;
        height: 100px;
        /* background-image: url("../public/imgs/star-close.png"); */
        background-image: url("./assets/star-close.png");

    }
</style>